<template>
  <el-dialog :title="'签到记录详情'" :visible.sync="visible" width="600px" :close-on-click-modal="false" append-to-body>
    <div class="detail-content">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="detail-item">
            <label>老师姓名：</label>
            <span>{{ recordData.teacherName }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="detail-item">
            <label>身份证号：</label>
            <span>{{ recordData.idCard ? recordData.idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2') : '' }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="detail-item">
            <label>签到日期：</label>
            <span>{{ recordData.signDate }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="detail-item">
            <label>签到时段：</label>
            <el-tag :type="getPeriodTagType(recordData.period)" size="small">
              {{ getPeriodLabel(recordData.period) }}
            </el-tag>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="detail-item">
            <label>签到状态：</label>
            <el-tag :type="getStatusTagType(recordData.status)" size="small">
              {{ getStatusLabel(recordData.status) }}
            </el-tag>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="detail-item">
            <label>签到方式：</label>
            <el-tag :type="getMethodTagType(recordData.method)" size="small">
              {{ getMethodLabel(recordData.method) }}
            </el-tag>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="detail-item">
            <label>签到时间：</label>
            <span>{{ recordData.signTime || '未签到' }}</span>
          </div>
        </el-col>
        <el-col :span="24" v-if="recordData.location">
          <div class="detail-item">
            <label>签到位置：</label>
            <span>{{ recordData.location }}</span>
          </div>
        </el-col>
        <el-col :span="24" v-if="recordData.deviceInfo">
          <div class="detail-item">
            <label>设备信息：</label>
            <span>{{ recordData.deviceInfo }}</span>
          </div>
        </el-col>
        <el-col :span="24" v-if="recordData.remark">
          <div class="detail-item">
            <label>备注：</label>
            <span>{{ recordData.remark }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="detail-item">
            <label>创建时间：</label>
            <span>{{ recordData.createTime }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="detail-item">
            <label>更新时间：</label>
            <span>{{ recordData.updateTime }}</span>
          </div>
        </el-col>
      </el-row>

      <!-- 签到时间配置信息 -->
      <div class="config-info" v-if="configData">
        <h4>签到时间配置</h4>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <label>开始时间：</label>
              <span>{{ configData.startTime }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>结束时间：</label>
              <span>{{ configData.endTime }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>迟到阈值：</label>
              <span>{{ configData.lateMinutes }}分钟</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>配置状态：</label>
              <el-tag :type="configData.isEnabled ? 'success' : 'danger'" size="small">
                {{ configData.isEnabled ? '启用' : '禁用' }}
              </el-tag>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 签到状态分析 -->
      <div class="status-analysis" v-if="recordData.signTime">
        <h4>签到状态分析</h4>
        <div class="analysis-content">
          <p v-if="isLate">
            <i class="el-icon-warning" style="color: #E6A23C;"></i>
            迟到 {{ lateMinutes }} 分钟
          </p>
          <p v-else-if="recordData.status === 'Normal'">
            <i class="el-icon-success" style="color: #67C23A;"></i>
            正常签到
          </p>
          <p v-if="recordData.status === 'EarlyLeave'">
            <i class="el-icon-warning" style="color: #E6A23C;"></i>
            早退
          </p>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getTrainSignRecordInfo } from '@/api/campus/trainSignRecord'
import { getDayConfigs } from '@/api/campus/trainSignTimeConfig'

export default {
  data() {
    return {
      visible: false,
      recordData: {},
      configData: null
    }
  },
  computed: {
    isLate() {
      if (!this.recordData.signTime || !this.configData || this.recordData.status !== 'Late') {
        return false
      }
      return true
    },
    lateMinutes() {
      if (!this.isLate || !this.recordData.signTime || !this.configData.startTime) {
        return 0
      }

      const signTime = this.$moment(this.recordData.signTime)
      const startTime = this.$moment(`${this.recordData.signDate} ${this.configData.startTime}`)
      return signTime.diff(startTime, 'minutes')
    }
  },
  methods: {
    init(record) {
      this.recordData = { ...record }
      this.visible = true
      this.getRecordDetail(record.id)
      this.getTimeConfig(record.trainId, record.signDate)
    },
    getRecordDetail(id) {
      getTrainSignRecordInfo(id).then(res => {
        this.recordData = res.data || {}
      })
    },
    getTimeConfig(trainId, signDate) {
      if (trainId && signDate) {
        getDayConfigs(trainId, signDate).then(res => {
          const configs = res.data || []
          this.configData = configs.find(item => item.periodName === this.recordData.period)
        })
      }
    },
    getPeriodLabel(period) {
      const periodMap = {
        1: '上午',
        2: '下午',
        3: '晚上'
      }
      return periodMap[period] || period
    },
    getPeriodTagType(period) {
      const typeMap = {
        1: 'success',
        2: 'primary',
        3: 'warning'
      }
      return typeMap[period] || ''
    },
    getStatusLabel(status) {
      const statusMap = {
        1: '正常签到',
        2: '迟到',
        3: '请假',
        4: '早退',
        5: '缺勤'
      }
      return statusMap[status] || status
    },
    getStatusTagType(status) {
      const typeMap = {
        1: 'success',
        2: 'warning',
        3: 'info',
        4: 'warning',
        5: 'danger'
      }
      return typeMap[status] || ''
    },
    /** 获取签到方式标签 */
    getMethodLabel(method) {
      const methodMap = {
        1: '二维码签到',
        2: '手动签到'
      }
      return methodMap[method] || method
    },
    /** 获取签到方式标签类型 */
    getMethodTagType(method) {
      const typeMap = {
        1: 'primary',
        2: 'warning'
      }
      return typeMap[method] || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-content {
  .detail-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;

    label {
      font-weight: bold;
      color: #333;
      min-width: 80px;
      margin-right: 10px;
    }

    span {
      color: #666;
      flex: 1;
    }
  }

  .config-info,
  .status-analysis {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;

    h4 {
      margin-bottom: 15px;
      color: #333;
      font-size: 14px;
      font-weight: bold;
    }
  }

  .analysis-content {
    p {
      margin: 8px 0;
      display: flex;
      align-items: center;

      i {
        margin-right: 8px;
        font-size: 16px;
      }
    }
  }
}
</style>
